<template>
  <div class="search">
    <el-form :inline="true">
      <el-form-item label="关键字" prop="name">
        <el-input v-model="dictTypeInput.name" placeholder="字典类型名称/编码" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="serachDictType">搜索</el-button>
        <el-button @click.stop="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-card shadow="never">
    <template #header>
      <el-button type="success" @click.stop="add">新增</el-button>
      <el-button type="danger" v-show="false">删除</el-button>
    </template>

    <div class="box-list">
      <el-table border style="width: 100%" :data="dictTypes.list">
        <el-table-column type="index" width="60" label="序号" />
        <el-table-column prop="name" label="字典类型名称" width="180" />
        <el-table-column prop="code" label="字典类型编码" width="180" />
        <el-table-column prop="status" label="状态" width="180">
          <template #default="scope">
            <el-text v-if="scope.row.status == 0">正常</el-text>
            <el-text v-if="scope.row.status == 1">禁用</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="auto" align="center" />
        <el-table-column prop="address" label="操作" width="240" align="center">
          <template #default="scope">
            <el-button text type="primary" size="small" @click.stop="editDict(scope.row)">数据字典</el-button>
            <el-button text type="primary" size="small" @click.stop="edit(scope.row)">编辑</el-button>
            <el-button text type="warning" size="small" @click.stop="deleteDictType(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="page" v-model:current-page="dictTypeInput.pageNo" v-model:page-size="dictTypeInput.pageSize"
        @update:page-size="serachDictType" @update:current-page="serachDictType" :background="true"
        layout="sizes, prev, pager, next" :page-sizes="[10, 20, 30, 50]" :total="dictTypes.count" />
    </div>
  </el-card>

  <el-dialog v-model="dictTypeDialogModel.dialogVisible" :title="dictTypeDialogModel.title" :width="600">
    <el-form :model="dictTypeData" :rules="rules" class="dialog" ref="ruleFormRef">
      <el-form-item label="字典类型名称:" prop="name">
        <el-input v-model="dictTypeData.name" placeholder="字典类型名称" clearable />
      </el-form-item>
      <el-form-item label="字典类型编码:" prop="code">
        <el-input v-model="dictTypeData.code" placeholder="字典类型编码" clearable />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="dictTypeData.status">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input v-model="dictTypeData.remark" placeholder="备注" clearable />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click.stop="commit">确 定</el-button>
        <el-button @click.stop="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <sys-dict-dialog ref="dictManager" />
</template>

<script lang="ts" setup>
import sysDictDialog from "@/views/sysView/sysDictDialog.vue"
import { getDictTypePage, removeDictType, addDictType, updateDictType } from "@/api/dict";
import { IDictType, IDictTypeInput, getRules } from "@/api/dict/type";
import { ref, reactive } from "vue";
import { IPageOutput, ConfirmDialog, validateForm } from "@/utils/common";
import { ElMessage } from "element-plus";
import type { FormInstance } from 'element-plus'
import { Dialog } from "@/utils/dialog"

// 获取数据验证规则
const rules = getRules();
// 字典类型列表数据
const dictTypes = ref<IPageOutput<IDictType>>({
  count: 0,
  list: [],
});
// 字典类型列表查询参数
const dictTypeInput = reactive<IDictTypeInput>({
  pageNo: 1,
  pageSize: 10,
});
// 字典类型弹窗viewModel
const dictTypeDialogModel = reactive(new Dialog());
// 数据字典类型编辑对象
const dictTypeData = reactive<IDictType>({
  id: 0,
  name: "",
  code: "",
  remark: "",
  status: 0,
});
// 表单实例
const ruleFormRef = ref<FormInstance | null>(null);

// 搜索方法
const serachDictType = async () => {
  const dictTypeData = await getDictTypePage(dictTypeInput);
  dictTypes.value = dictTypeData.data;
};
// 重置
const reset = async () => {
  dictTypeInput.name = "";
  dictTypeInput.code = "";
  dictTypeInput.pageNo = 1;
  dictTypeInput.pageSize = 10;
  await serachDictType();
};
serachDictType();
// 删除字典类型
const deleteDictType = (id: number) => {
  ConfirmDialog("确认删除?",
    async () => {
      await removeDictType([id]);
      await serachDictType();
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    },
    () => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      });
    });
}
const edit = (dict: IDictType) => {
  dictTypeDialogModel.show("编辑");

  dictTypeData.id = dict.id;
  dictTypeData.name = dict.name;
  dictTypeData.code = dict.code;
  dictTypeData.remark = dict.remark;
  dictTypeData.status = dict.status;
}
const add = async () => {
  dictTypeDialogModel.show("添加");

  dictTypeData.name = "";
  dictTypeData.code = "";
  dictTypeData.remark = "";
  dictTypeData.status = 0;

}
const closeDialog = () => {
  dictTypeDialogModel.close();
}
const commit = () => {
  validateForm(ruleFormRef).then(async () => {
    if (dictTypeDialogModel.title == "添加") {
      await addDictType(dictTypeData);
    } else if (dictTypeDialogModel.title == "编辑") {
      await updateDictType(dictTypeData);
    }

    await serachDictType();
    closeDialog();
  })
}

// 书记字典详情弹窗
type sysDictDialogType = InstanceType<typeof sysDictDialog>;
const dictManager = ref<sysDictDialogType | null>(null);
const editDict = (dictType: IDictType) => {
  dictManager.value?.showDialog(dictType);
};
</script>

<style scoped>
.dialog {
  padding: 0 20px;
}
</style>